<template>
  <div class="home">
    <div class="fromTeam">
      <el-date-picker v-model="fromDateContent" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" size="small" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
      <el-select v-model="fromInputSelect" slot="prepend" placeholder="竞标结果选择" size="small" class="fromSelect">
        <el-option v-for="item in bidStatusSelect" :label="item.Caption" :key="item.Value" :value="item.Value"></el-option>
        <el-option label="" value=""></el-option>
      </el-select>
      <el-input placeholder="请输入内容" v-model="fromInputContent" size="small" class="fromInput"> </el-input>
      <el-button slot="append" size="small" icon="el-icon-search" @click="getConditionQuery()"></el-button>
    </div>
    <el-table :data="bidAuctionResultList" row-key="FBillNo" :expand-row-keys="expands" @expand-change="rowclick" highlight-current-row height="550px" style="width: 100%">
      <el-table-column type="expand" show-overflow-tooltip>
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="品名:">
              <span>{{ props.row.F_PKTL_MaterialName }}</span>
            </el-form-item>
            <el-form-item label="物料类型:">
              <span>{{ getAuctionResultValue(props.row.F_PKTL_MaterialType, 'F_PKTL_MaterialType') }}</span>
            </el-form-item>
            <el-form-item label="材质:">
              <span>{{ props.row.F_PKTL_GoodMaterial }}</span>
            </el-form-item>
            <el-form-item label="规格:">
              <span>{{ props.row.F_PKTL_MaterialSpec }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="项目编码" prop="F_PKTL_SourceBillNo"> </el-table-column>
      <el-table-column label="项目名称" prop="F_PKTL_ProjectName"> </el-table-column>
      <el-table-column label="日期" prop="F_PKTL_Date" :formatter="dataFormatter"> </el-table-column>
      <el-table-column label="竞标结果" prop="F_PKTL_BidStatus" :formatter="dataFormatter"></el-table-column>
    </el-table>
    <el-pagination background :page-size="resultLimit" layout="prev, pager, next" :total="resultTopRowCount" @current-change="currentPageChange"> </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 输入框时间的内容
      fromDateContent: '',
      // 输入框的下拉表单
      fromInputSelect: '',
      // 输入框的内容
      fromInputContent: '',
      // 要展开的行，数值的元素是row的key值
      expands: [],
      // 设置当前页面的位置
      // currentPage:1,
      // 金蝶查询需要的参数
      auctionResultParams:{},
      // 金蝶查询属性数组
      fieldKeys: [
        'FBillNo',
        'F_PKTL_SourceBillNo',
        'F_PKTL_ProjectName',
        'F_PKTL_Date',
        'F_PKTL_MaterialType',
        'F_PKTL_GoodMaterial',
        'F_PKTL_MaterialSpec',
        'F_PKTL_MaterialName',
        'F_PKTL_BidAmount',
        'F_PKTL_PledgeAmount',
        'F_PKTL_BidStatus',
      ],
      // 竞标结果的集合
      bidAuctionResultList: [],
      // 竞价结果的元数据
      resultBusinessInfo: {},
      // 竞价结果状态的下拉列表
      bidStatusSelect: [],
      // 竞价结果查询的开始行索引
      resultStartRow: 0,
      // 竞价结果查询的最大行数
      resultLimit: 8,
      // 竞价结果查询的总行数
      resultTopRowCount: 0,
    }
  },
  created() {
    this.getApiData()
  },
  methods: {
    // 按顺序获取金蝶的数据
    async getApiData() {
      console.log('getApiData方法')
      // 初始化查询数据
      await this.buildResultParams()
      // 获取表单的元数据
      await this.loadResultBusinessInfo()
      // 查询竞价结果的总数量
      await this.getResultCount()
      // 获取竞价结果的数据
      this.loadBidAuctionResult(this.auctionResultParams)
    },
    // 查询竞价结果--初始化金蝶需要的参数
    async buildResultParams() {
      this.auctionResultParams = {}
      this.auctionResultParams.FormId = 'PKTL_BidAuctionResult'
      this.auctionResultParams.FieldKeys = this.fieldKeys.toString()
      this.auctionResultParams.StartRow = this.resultStartRow
      this.auctionResultParams.OrderString = 'F_PKTL_Date desc'
    },
    // 查询竞价结果--加载
    loadBidAuctionResult(params) {
      params.StartRow = this.resultStartRow
      params.Limit=this.resultLimit
      const data = { data: params }
      this.$api.bidAuctionResult.executeBillQuery(data).then((res) => {
        console.log(res, '竞价结果的数据')
        const notictList = []
        res.forEach((item, i) => {
          let obj = Object.create(null)
          this.fieldKeys.forEach((fieldKey, i) => {
            obj[fieldKey] = item[i]
          })
          notictList.push(obj)
        })
        this.bidAuctionResultList = []
        this.bidAuctionResultList = notictList
      })
    },
    // 获取竞价结果的元数据
    async loadResultBusinessInfo() {
      await this.$api.billBusinessInfo.queryBusinessInfo('PKTL_BidAuctionResult').then((res) => {
        if (res != null) {
          if (res.Result.NeedReturnData != null) {
            this.resultBusinessInfo = res
            console.log('竞价结果表单的元数据', this.resultBusinessInfo)
            if (res.Result.NeedReturnData != null) {
              res.Result.NeedReturnData.Entrys[0].Fields.forEach((element) => {
                // 判断元数据的key名字是否符合条件，将数组对象重新赋值
                if (element.Key == 'F_PKTL_BidStatus') {
                  this.bidStatusSelect = element.Extends
                }
              })
            }
          }
        }
      })
    },
    // 查询竞价结果的总数量
    async getResultCount() {
      this.auctionResultParams.Limit=0
      const data = { data: this.auctionResultParams }
      await this.$api.bidAuctionResult.executeBillQuery(data).then((res) => {
        console.log(res.length)
        this.resultTopRowCount = res.length
      })
    },
    // 获取竞价结果的物料类型
    getAuctionResultValue(fieldValue, fieldKey) {
      return this.Common.getFieldValue(fieldValue, fieldKey, this.resultBusinessInfo)
    },
    // 格式化时间
    getFormatDate(item) {
      return this.Common.dateFormat(item, 'yyyy-MM-dd HH:mm')
    },
    // 表格格式化参数的方法
    dataFormatter(row, column, cellValue, index) {
      // console.log(column, cellValue + '---' + index)
      if (column.property == 'F_PKTL_Date') {
        if (cellValue == null) {
          return null
        }
        return this.getFormatDate(cellValue)
      }
      if (column.property == 'F_PKTL_MaterialType') {
        return this.getAuctionResultValue(cellValue, 'F_PKTL_MaterialType')
      }
      if (column.property == 'F_PKTL_BidStatus') {
        return this.getAuctionResultValue(cellValue, 'F_PKTL_BidStatus')
      }
      return null
    },
    //在<table>里，我们已经设置row的key值设置为每行数据id：row-key="id"
    rowclick(row, expandedRows) {
      this.expands = []
      console.log(expandedRows)
      if (expandedRows.length < 1) {
        return
      }
      this.expands.push(row.FBillNo)
    },
    // 分页的当前页修改触发分方法
    currentPageChange(val) {
      if (val > 0) {
        this.resultStartRow = val * this.resultLimit - this.resultLimit
      }
    },
    // 条件查询的执行方法
    getConditionQuery() {
      this.auctionResultParams.StartRow = 0
      this.auctionResultParams.FilterString = []
      if (this.fromInputContent != null && this.fromInputContent != '') {
        this.auctionResultParams.FilterString.push(
          { Left: '(', FieldName: 'F_PKTL_SourceBillNo', Compare: 'like', Value: this.fromInputContent, Right: ')', Logic: 'OR' },
          { Left: '(', FieldName: 'F_PKTL_ProjectName', Compare: 'like', Value: this.fromInputContent, Right: ')', Logic: 'AND' }
        )
      }
      if (this.fromInputSelect != '' && this.fromInputSelect != null) {
        this.auctionResultParams.FilterString.push({ Left: '(', FieldName: 'F_PKTL_BidStatus', Compare: 'StatusEqualto', Value: this.fromInputSelect, Right: ')', Logic: 'AND' })
      }
      if (this.fromDateContent != '' && this.fromDateContent != null) {
        this.auctionResultParams.FilterString.push(
          { Left: '(', FieldName: 'F_PKTL_Date', Compare: '>', Value: this.fromDateContent[0], Right: ')', Logic: 'AND' },
          { Left: '(', FieldName: 'F_PKTL_Date', Compare: '<', Value: this.fromDateContent[1], Right: ')', Logic: 'AND' }
        )
      }
      this.getResultCount()
      this.auctionResultParams.Limit = this.resultLimit
      const data = { data: this.auctionResultParams }
      this.$api.bidAuctionResult.executeBillQuery(data).then((res) => {
        console.log(res, '竞价结果的数据')
        const notictList = []
        res.forEach((item, i) => {
          let obj = Object.create(null)
          this.fieldKeys.forEach((fieldKey, i) => {
            obj[fieldKey] = item[i]
          })
          notictList.push(obj)
        })
        this.bidAuctionResultList = []
        this.bidAuctionResultList = notictList
      })
    },
  },
  // 监听当前页面数值的变化惊醒查询数据
  watch: {
    resultStartRow(newVal, oldVal) {
      if (newVal != oldVal) {
        console.log(newVal, oldVal)
        this.getResultCount()
        // this.buildResultParams()
        this.loadBidAuctionResult(this.auctionResultParams)
      }
    },
  },
}
</script>
<style scoped>
.home {
  width: 80%;
  margin: auto;
  scroll-behavior: smooth;
  /* border: 1px solid red; */
}
/* 表格的样式 */
.demo-table-expand {
  font-size: 0;
  padding: 0px 66px;
  background-color: rgb(255, 245, 226);
  box-shadow: 0 0px 6px rgba(0, 0, 0, 0.12);
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 600px;
  /* box-shadow: 0 0px 6px rgba(0, 0, 0, 0.12); */
}
.fromInput {
  margin-left: 20px;
  width: 500px;
}

.fromSelect {
  margin-left: 20px;
  width: 150px;
}
.fromTeam {
  padding: 20px;
}
</style>